<template>
  <div>
    <div class="commontop">
      <div class="commontop-left">
        <el-input
          v-model="pages.keyword"
          @change="INput"
          @clear="INput"
          @keyup.enter.native="goSearch()"
          placeholder="请输入公司名称或者信用代码"
          clearable
          prefix-icon="el-icon-search"
        ></el-input>
        <el-button
          class="searchbgc"
          @click="goSearch"
          icon="iconfont icon-sousuo2"
          >搜索</el-button
        >
        <router-link
          :to="{
            path: '/user/user-registration',
            query: {
              id: '1',
            },
          }"
          ><el-button
            v-show="xsyc === '1' ? true : false"
            icon="iconfont icon-gongsi"
            >注册</el-button
          ></router-link
        >
      </div>
    </div>
    <el-table
      class="table"
      v-loading="isLoading"
      element-loading-spinner="el-icon-loading"
      element-loading-text="玩命加载中"
      :data="tableData"
      :header-cell-style="{ backgroundColor: '#3963fd', color: '#fff' }"
      style="width: 100%; margin-top: 20px"
    >
      <template slot="empty">
        <img src="@/assets/imgs/暂未数据.png" alt style="margin-top: 104px" />
        <p style="margin-top: 15px; margin-bottom: 104px">暂未有数据</p>
      </template>
      <el-table-column prop="id" label="ID" width="80"></el-table-column>
      <el-table-column
        prop="title"
        :show-overflow-tooltip="true"
        label="公司名称"
      ></el-table-column>

      <el-table-column
        prop="nickname"
        width="100"
        :show-overflow-tooltip="true"
        label="委托人"
      ></el-table-column>
      <el-table-column
        prop="certificate"
        :show-overflow-tooltip="true"
        label="信用代码"
      ></el-table-column>
      <el-table-column prop="created_at" label="创建时间"></el-table-column>
      <el-table-column label="状态" width="80">
        <template slot-scope="scope">
          <el-tag v-if="tableData[scope.$index].status == 0">待审核</el-tag>
          <el-tag v-if="tableData[scope.$index].status == 1" type="success"
            >已通过</el-tag
          >
          <el-tag v-if="tableData[scope.$index].status == 2" type="danger"
            >已拒绝</el-tag
          >
        </template>
      </el-table-column>

      <el-table-column label="操作" width="120">
        <template slot-scope="scope">
          <!-- v-if="scope.row.value == true ? true : false" -->
          <el-button class="green" size="mini" @click="handleEdit(scope.row.id)"
            ><i class="el-icon-edit"></i
          ></el-button>
          <el-button
            v-if="scope.row.status === 0"
            class="red"
            size="mini"
            @click="handleAuditing(scope.row.id)"
            ><i class="el-icon-s-check"></i
          ></el-button>
        </template>
      </el-table-column>
    </el-table>

    <div class="pagination">
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="current_page"
        :page-sizes="pageSizeArr"
        :page-size="pages.per_page"
        layout="total, sizes, prev, pager, next"
        :total="total"
      >
      </el-pagination>
    </div>
    <el-dialog
      title="请选择审核状态"
      :visible.sync="dialogData"
      style="margin-top: 18vh"
      width="30%"
    >
      <div class="choice">
        <div v-for="(item, index) in sum" :key="item.id">
          <input
            type="radio"
            :status="item.status"
            :value="item.value"
            v-model="picked2"
            @change="changeInput(index)"
          />
          <label :for="item.order">{{ item.value }}</label>
        </div>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" size="medium" @click="Auditing"
          >确定</el-button
        >
      </span>
    </el-dialog>
    <el-dialog
      class="tab"
      title="编辑"
      width="35%"
      :visible.sync="dialogFormVisible"
    >
      <el-form :model="editForm" ref="editForm">
        <el-form-item label="公司名称:" :label-width="formLabelWidth">
          <el-input
            placeholder="请输入公司名称"
            v-model="editForm.title"
            autocomplete="off"
          ></el-input>
        </el-form-item>
        <el-form-item label="信用代码:" :label-width="formLabelWidth">
          <el-input
            placeholder="请输入信用代码"
            v-model="editForm.certificate"
            autocomplete="off"
          ></el-input>
        </el-form-item>
        <el-form-item label="状态:" :label-width="formLabelWidth">
          <el-radio-group v-model="editForm.status">
            <el-radio :label="2">拒绝</el-radio>
            <el-radio :label="1">通过</el-radio>
            <el-radio :label="0">未审核</el-radio>
          </el-radio-group>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="editModify('editForm')"
          >确 定</el-button
        >
      </div>
    </el-dialog>
  </div>
</template>

<script>
import {
  companies,
  Companyreview,
  Getcompanies,
  modifycompanies,
} from "../../api/company/index";
import commonInfo from "@/utils/common";
export default {
  data() {
    return {
      //选择审核状态绑定值
      picked2: "",
      /* 审核表单 */
      from: {
        id: "",
        status: "",
      },
      /* 审核数组 */
      sum: [
        { status: "2", isClick: false, value: "未通过" },
        { status: "1", isClick: false, value: "通过" },
      ],
      /* 审核状态蒙尘 */
      dialogData: false,
      //按钮显示隐藏
      xsyc: "1",
      /* 表格数据 */
      tableData: [],

      //页数
      pageSizeArr: JSON.parse(JSON.stringify(commonInfo.pageSizeArr)),
      pages: {
        per_page: 10,
        page: 1,
        keyword: "",
      },
      //表格页面
      current_page: 10,
      total: 0,

      isLoading: true,
      drawer: false,
      //编辑蒙尘
      dialogFormVisible: false,
      /* 编辑表单 */
      editForm: {
        id: "",
        title: "",
        certificate: "",
        status: "",
      },

      formLabelWidth: "100px",
    };
  },
  methods: {
    //获取列表
    async loadData(num) {
      let res = await companies(num);
      console.log(res);
      if (res.data.code == 200) {
        this.tableData = res.data.data.data;
        this.current_page = res.data.data.current_page;
        this.total = res.data.data.total;
        this.isLoading = false;
        for (let item1 of this.tableData) {
          for (let item2 of res.data.data.data) {
            if (item1.id == item2.id) {
              item1.nickname = item2.principal.map((i) => {
                return i.nickname;
              });
            }
          }
        }
      }
    },
    INput() {
      if (this.pages.keyword == "") {
        this.loadData();
      }
    },
    //搜索
    async goSearch() {
      this.pages.page = 1;
      this.pages.per_page = 10;
      this.current_page = 1;
      console.log(this.pages);
      if (this.pages.keyword == "") {
        this.$message.warning("查询条件不能为空！");
        return;
      }
      let res = await companies(this.pages);
      console.log(res, "123");
      this.tableData = res.data.data;
      this.current_page = res.data.current_page;
      this.per_page = res.data.per_page;
      this.total = res.data.total;
      this.isLoading = false;
      for (let item1 of this.tableData) {
        for (let item2 of res.data.data) {
          if (item1.id == item2.id) {
            item1.nickname = item2.principal.map((i) => {
              return i.nickname;
            });
          }
        }
      }
    },
    //分页
    handleCurrentChange(val) {
      this.current_page = val;
      this.pages.page = val;
      this.loadData(this.pages);
    },
    //分页
    handleSizeChange(val) {
      this.pages.per_page = val;
      this.loadData(this.pages);
    },
    //编辑
    async handleEdit(id) {
      let res = await Getcompanies({ id });
      //console.log(res);
      this.dialogFormVisible = true;
      if (res.data.code == 200) {
        this.editForm.id = res.data.data.id;
        this.editForm.title = res.data.data.title;
        this.editForm.certificate = res.data.data.certificate;
        /*  this.editForm.nickname = res.data.data.nickname; */
        this.editForm.status = res.data.data.status;
      }
    },
    /* 审核状态改变 */
    changeInput(index) {
      this.sum.map((v, i) => {
        if (i == index) {
          v.isCheck = true;
        } else {
          v.isCheck = false;
        }
      });
    },
    //审核通过还是拒绝
    handleAuditing(id) {
      this.dialogData = true;
      this.from.id = id + "";
      //console.log(id);
    },
    //审核完成
    Auditing() {
      this.sum.map(async (v, i) => {
        if (v.isCheck) {
          this.from.status = v.status;
          let res = await Companyreview(this.from);
          if (res && res.data.code == 200) {
            this.$message({
              showClose: true,
              duration: 3000,
              message: res.data.msg,
              type: "success",
            });
            this.dialogData = false;
            this.loadData();
          } else {
            this.$message({
              showClose: true,
              duration: 3000,
              message: res.data.msg,
              type: "error",
            });
          }
        }
      });
    },
    //编辑完成
    editModify(formName) {
      console.log(this.editForm);
      console.log(this.editForm.id);
      this.$refs[formName].validate(async (valid) => {
        //console.log(valid);
        if (valid) {
          let res = await modifycompanies(this.editForm);
          console.log(res, "123");
          if (res.data.code === 200) {
            this.$message({
              showClose: true,
              duration: 3000,
              message: res.data.msg,
              type: "success",
            });
            this.loadData();
          } else {
            this.$message({
              showClose: true,
              duration: 3000,
              message: res.data.msg,
              type: "error",
            });
          }
        }
        this.dialogFormVisible = false;
      });
    },
  },
  created() {
    this.loadData();
  },
};
</script>

<style scoped lang="less">
/deep/.el-table__header {
  margin-bottom: 20px;
}
/deep/.el-table {
  background-color: #f3f5fb;
}
/deep/.el-table .cell {
  display: flex;
}
/deep/.el-button--mini {
  font-size: 18px !important;
}
.choice {
  display: flex;

  justify-content: space-around;
  flex-wrap: wrap;
}
</style>